<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页 - 宠物寄养平台-后台管理系统</title>
<jsp:include page="headlink.jsp"></jsp:include>
<style type="text/css">
.layui-form-label {
	padding: 9px 12px;
}
</style>
</head>
<body>
	<div class="lyear-layout-web">
		<div class="lyear-layout-container">
			<!--左侧导航-->
			<jsp:include page="leftsidebar.jsp"></jsp:include>
			<!--End 左侧导航-->

			<!--头部信息-->
			<jsp:include page="header.jsp"></jsp:include>
			<!--End 头部信息-->

			<!--页面主要内容-->
			<main class="lyear-layout-content">

			<div class="container-fluid">

				<div class="demoTable">
					搜索姓名：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>

				<!-- 添加按钮弹出层 -->
				<div class="layui-row" id="addorderinfo" style="display: none;">
					<div class="layui-col-md11">
						<form class="layui-form" action="" id='myform'>
							<div class="layui-form-item" style="display: none">
								<label class="layui-form-label">订单编号：</label>
								<div class="layui-input-inline">
									<input type="text" name="oid" class="layui-input" id="oid1"
										value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">用户编号</label>
								<div class="layui-input-inline">
									<input type="text" name="ouid" class="layui-input" id="ouid1"
										lay-verify="ouid">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">下单用户</label>
								<div class="layui-input-inline">
									<input type="text" name="ofuname" class="layui-input"
										id="ofuname1" lay-verify="required">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">寄养家庭</label>
								<div class="layui-input-inline">
									<input type="text" name="otuname" class="layui-input"
										id="otuname1" lay-verify="required">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">宠物名</label>
								<div class="layui-input-inline">
									<input type="text" name="opetname" class="layui-input"
										id="opetname1" lay-verify="required">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">宠物类型</label>
								<div class="layui-input-inline">
									<select name="opettype" id="opettype1" lay-verify="required">
										<option value="0">狗</option>
										<option value="1">猫</option>
										<option value="2">其它</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">健康状态</label>
								<div class="layui-input-block">
									<input type="radio" name="opetstatus" value="0" title="生病"
										checked> <input type="radio" name="opetstatus"
										value="1" title="健康">
								</div>
							</div>
							<div class="layui-inline" >
								<label class="layui-form-label">预约日期</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="ostdate1"
										name="ostdate" placeholder="yyyy-MM-dd HH:mm:ss" lay-verify="required">
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">结束日期</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="oenddate1"
										name="oenddate" placeholder="yyyy-MM-dd HH:mm:ss" lay-verify="required">
								</div>
							</div>

							<div class="layui-form-item">
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-normal"
										id="subbtn" lay-submit="" lay-filter="demo2">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				<!-- 添加按钮弹出层 -->
				<!-- 编辑按钮弹出层 -->
				<div class="layui-row" id="editorderinfo" style="display: none;">
					<div class="layui-col-md11">
						<form class="layui-form" action="" id='myform'>
							<div class="layui-form-item" style="display: none">
								<label class="layui-form-label">订单编号：</label>
								<div class="layui-input-inline">
									<input type="text" name="oid" class="layui-input" id="oid"
										value="" readonly>
								</div>
							</div>
							<div class="layui-form-item" style="display: none">
								<label class="layui-form-label">下单用户编号</label>
								<div class="layui-input-inline">
									<input type="text" name="ouid" class="layui-input" id="ouid"
										value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">下单用户</label>
								<div class="layui-input-inline">
									<input type="text" name="ofuname" class="layui-input" readonly
										id="ofuname" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">寄养家庭</label>
								<div class="layui-input-inline">
									<input type="text" name="otuname" class="layui-input" readonly
										id="otuname" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">宠物名</label>
								<div class="layui-input-inline">
									<input type="text" name="opetname" class="layui-input" readonly
										id="opetname" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">宠物类型</label>
								<div class="layui-input-inline">
									<input type="text" name="opettype" class="layui-input" readonly
										id="opettype" value="">
										
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">健康状态</label>
								<div class="layui-input-block">
									<input type="radio" name="opetstatus" value="0" title="生病"
										checked> <input type="radio" name="opetstatus"
										value="1" title="健康">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">下单日期</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="ostdate"
										name="ostdate" placeholder="yyyy-MM-dd HH:mm:ss">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">寄养天数</label>
								<div class="layui-input-inline">
									<input type="text" name="odays" class="layui-input" readonly
										id="odays" value="">
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">结束日期</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="oenddate"
										name="oenddate" placeholder="yyyy-MM-dd HH:mm:ss">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">押金</label>
								<div class="layui-input-inline">
									<input type="text" name="odeposit" class="layui-input"
										id="odeposit" readonly>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">总金额</label>
								<div class="layui-input-inline">
									<input type="text" name="ototal" class="layui-input"
										id="ototal"  readonly>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">结算金额</label>
								<div class="layui-input-inline">
									<input type="text" name="ofinapay" class="layui-input"
										id="ofinapay" readonly>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">订单状态</label>
								<div class="layui-input-block">
									<input type="radio" name="ostatus" value="0" title="已交押金"
										checked> <input type="radio" name="ostatus" value="1"
										title="已完成">
								</div>
							</div>

							<div class="layui-form-item">
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-normal"
										id="subbtn" lay-submit="" lay-filter="demo1">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				<!-- 编辑按钮弹出层结束 -->

			</div>

			</main>
			<!--End 页面主要内容-->
		</div>
	</div>

	<script type="text/javascript" src="${pageContext.request.contextPath}/backmanage/js/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/backmanage/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/backmanage/js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/backmanage/js/main.min.js"></script>
	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
	<button class="layui-btn layui-btn-sm" lay-event="adduser">添加订单</button>
  </div>
</script>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  
</script>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/backmanage/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<!--日期选择器  -->
	<script type="text/javascript">
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			laydate.render({
				elem : '#ostdate',
				type : 'datetime'
			});
			laydate.render({
				elem : '#oenddate',
				type : 'datetime'
			});
			laydate.render({
				elem : '#ostdate1',
				type : 'datetime'
			});
			laydate.render({
				elem : '#oenddate1',
				type : 'datetime'
			});
		});
	</script>
	<!-- 日期选择器  -->

	<script>
		layui.use('table', function() {
			var table = layui.table;
			var form = layui.form;
			/*  编辑表单校验 */
			form.verify({
				odeposit : [ /^\+?[1-9][0-9]*$/, '请输入正确的押金金额' ],
				ototal : [ /^\+?[1-9][0-9]*$/, '请输入正确的总金额' ],
				odays : [ /^\+?[1-9][0-9]*$/, '请输入正确的寄养天数' ],
				ofinapay : [ /^\+?[1-9][0-9]*$/, '请输入正确的结算金额' ]
			});

			table.render({
				elem : '#test',
				url : '../orders/list',
				toolbar : '#toolbarDemo',
				title : '用户数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'oid',
					title : '订单编号',
					sort : true,
					fixed : 'left'
				}, {
					field : 'ouid',
					title : '用户编号',
				}, {
					field : 'ofuname',
					title : '下单用户名',
					sort : true
				}, {
					field : 'otuname',
					title : '寄养家庭名',
				}, {
					field : 'opetname',
					title : '寄养宠物名',
				}, {
					field : 'opettype',
					title : '宠物类型',
					sort : true,
					templet : function(res) {
						var a=res.opettype == 0 ? "狗" : "猫";
						return res.opettype == 2 ? "其它" : a;
						//return res.opettype == 2 ? "其他" : (res.opettype == 0 ? "狗" : "猫");
					}
				}, {
					field : 'opetstatus',
					title : '宠物健康状态',
					sort : true,
					templet : function(res) {
						return res.opetstatus == 1 ? "健康" : "生病"
					}
				}, {
					field : 'ostdate',
					title : '预约寄养日期',
					sort : true
				}, {
					field : 'odays',
					title : '寄养天数',
					sort : true
				}, {
					field : 'oenddate',
					title : '寄养结束日期',
					sort : true
				}, {
					field : 'odeposit',
					title : '押金',
					sort : true
				}, {
					field : 'ototal',
					title : '总金额',
					sort : true
				}, {
					field : 'ofinapay',
					title : '结算金额',
					sort : true
				}, {
					field : 'ostatus',
					title : '订单完成状态',
					templet : function(res) {
						return res.ostatus == 0 ? "已交押金" : "已完成"
					}
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
				} ] ],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				case 'adduser':
					layer.open({
						type : 1,
						title : "添加订单",
						skin : 'layui-layer-rim', //加上边框
						area : [ '500px', '500px' ], //宽高
						content : $("#addorderinfo"),
					});
					/* 渲染表单 */
					form.render();
					break;
				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('真的删除吗？', function(index) {
						$.ajax({
							type : 'get',
							url : '../orders/delOrder',
							data : {
								oid : data.oid
							},
							success : function(data) {
								if (data.msg == "删除成功") {
									layer.msg(data.msg, {
										icon : 1,
										time : 1000

									}, function() {
										obj.del();
										layer.close(index);
										table.reload('testReload');
									});
								}

							}
						});
					})

				} else if (obj.event === 'edit') {
					
					if (data.opettype == 0) {
						$("#opettype").attr("value", "狗");
					} else if(data.opettype == 1){
						$("#opettype").attr("value", "猫");
					}else{
						$("#opettype").attr("value", "其他");
					}

					$("#oid").attr("value", data.oid);
					$("#ouid").attr("value", data.ouid);
					$("#ofuname").attr("value", data.ofuname);
					$("#otuname").attr("value", data.otuname);
					$("#opetname").attr("value", data.opetname);
					//$("#opettype").attr("value", data.opettype);
					$("#ostdate").attr("value", data.ostdate);
					$("#odays").attr("value", data.odays);
					$("#oenddate").attr("value", data.oenddate);
					$("#odeposit").attr("value", data.odeposit);
					$("#ofinapay").attr("value", data.ototal - data.odeposit);
					$("#ototal").attr("value", data.ototal);
					$("input[name=opetstatus][value=0]").prop("checked",
							data.opetstatus == 0 ? true : false);
					$("input[name=opetstatus][value=1]").prop("checked",
							data.opetstatus == 1 ? true : false);
					$("input[name=ostatus][value=0]").prop("checked",
							data.ostatus == 0 ? true : false);
					$("input[name=ostatus][value=1]").prop("checked",
							data.ostatus == 1 ? true : false);
					//页面层
					layer.open({
						type : 1,
						title : "修改订单信息",
						skin : 'layui-layer-rim', //加上边框
						area : [ '800px', '800px' ], //宽高
						content : $("#editorderinfo"),
					});
					/* 渲染表单 */
					form.render();
				}
			});

			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							content : demoReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//编辑--监听提交
			layui.form.on('submit(demo1)', function(data) {
				/*  layer.alert(JSON.stringify(data.field), {
				   title: '最终的提交信息'
				 })
				 return false; */

				$.ajax({
					'type' : 'post',
					'url' : '../orders/updateOrder',
					'data' : JSON.stringify(data.field),
					'contentType' : 'application/json',
					'success' : function(data) {
						if (data.msg == '修改成功') {
							layer.closeAll();
							table.reload('testReload');//重新加载列表
							layer.msg("修改成功")
						}
					}
				});
			});

			//添加--监听提交
			layui.form.on('submit(demo2)', function(data) {
				$.ajax({
					'type' : 'post',
					'url' : '../orders/addOrder',
					'data' : JSON.stringify(data.field),
					'contentType' : 'application/json',
					'success' : function(data) {
						if (data.msg == '增加成功') {
							layer.closeAll();
							table.reload('testReload');//重新加载列表
							layer.msg("添加成功")
						}
					}
				});
			});
		});
	</script>

</body>